<!doctype html>
<html>
	<head>
		<meta charshet="utf-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<title>svg动画</title>
		<style>
			:root {
				--pixel-size: 6;
			}

			body {
				background: ghostwhite;
			}

			.Character {
				width: calc(32px * var(--pixel-size));
				height: calc(32px * var(--pixel-size));
				overflow: hidden;
				position: relative;
				margin: 4em auto;
			}

			.Character_spritesheet {
				animation: moveSpritesheet 1s steps(4) infinite;
				width: calc(128px * var(--pixel-size));
				position: absolute;

			}

			.Character_shadow {
				position: absolute;
				width: calc(32px * var(--pixel-size));
				height: calc(32px * var(--pixel-size));
			}

			.pixelart {
				image-rendering: pixelated;
			}

			.face-right {
				top: calc(-32px * var(--pixel-size));
			}

			.face-up {
				top: calc(-64px * var(--pixel-size));
			}

			.face-left {
				top: calc(-96px * var(--pixel-size));
			}


			@keyframes moveSpritesheet {
				from {
					transform: translate3d(0px, 0, 0)
				}

				to {
					transform: translate3d(-100%, 0, 0)
				}
			}
		</style>
	</head>
	<body>
		<div class="Character">

			<img class="Character_shadow pixelart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacterShadow.png"
			 alt="Shadow" />

			<img class="Character_spritesheet pixelart face-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacter.png"
			 alt="Character" />


		</div>

	</body>
</html>
<!--style="font-size: 14px; background:#f8f8f8; font-family: adobe 黑体 std;padding:6px"
 	<div class=qy-mod-list style="position:static;margin-left:0px;>
 { width=25%;height=25%;border:25px solid green;background-color:#f8f8f8;}
 <div width:20px; style=font-size:24px;font-family:PingFangSC regula:200px>
